<template>
  <div class="counter-warp">
    <div class="hd">
      <div class="ipsum">当前IP有 {{ ipsum }} 个</div>
      <div class="bgdivcls" v-bind:class="{ hiddendiv : ishid }">
        <img class="bgcls" src="http://qiniuyun.bblog.site/dir11.png"/>
        <p class="bgp">NO IP</p>
      </div>
      <ul class="log-list">
        <li v-for="(ip, index) in ips" :class="{ red: aa }" :key="index" class="log-item">
          <span class="ipcls" @click="delip(ip.id, index, ip.ip)">{{ ip.ip }}</span>
        </li>
      </ul>
      <a href="/pages/ipmanager/add/main" class="counter">添加IP白名单 </a>
   </div>
   <div class="fd"></div>

   <mptoast />
  </div>
</template>

<script>
import { requestPost } from '@/utils/index'
import mptoast from 'mptoast'
export default {
  components: {
    mptoast
  },
  data () {
    return {
      ips: [],
      ipsum: 0,
      ishid: false,
      pageNo: 1
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: 'IP 白名单'
    })
  },
  onReachBottom () {
    this.pageNo = this.pageNo + 1
    this.getIPList()
  },
  onShow () {
    this.ipsum = 0
    this.ips = []
    this.pageNo = 1
    this.getIPList()
  },
  methods: {
    getIPList () {
      var that = this
      var data = {
        'openid': wx.getStorageSync('openid'),
        'pageNo': this.pageNo,
        'rowCount': 150
      }
      wx.showLoading({
        title: '正在获取IP列表',
        mask: true
      })
      requestPost(wx.getStorageSync('requestUrl') + '/wxsys/getipsByOpenid', data, 'POST').then(function (value) {
        for (var ele of value.data) {
          that.ips.push(ele)
        }
        that.ipsum = that.ipsum + that.ips.length
        if (that.ipsum !== 0) {
          that.ishid = true
        }
        wx.hideLoading()
      }, function (value) {
        wx.hideLoading()
        console.log(value)
        this.$mptoast(value)
      })
    },
    showToast () {
      this.$mptoast('功能待开发')
    },
    delip (id, index, ip) {
      var that = this
      var data = {
        'id': parseInt(id)
      }
      wx.showModal({
        title: '删除 ' + ip,
        content: '',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            requestPost(wx.getStorageSync('requestUrl') + '/wxsys/delIp', data, 'POST').then(function (value) {
              that.$mptoast('删除成功')
              that.ips.splice(index, 1)
              that.ipsum = that.ipsum - 1
            }, function (value) {
              console.log(value)
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  }
}
</script>

<style>
html,body,#app {
  background-color: #eee;
}
.hd{
  width: 100%;
  float: left;
}
.fd{
  float: left;
  width: 100%;
  height: 80px;
  border: 0px solid red;

}
.hiddendiv{
  display: none;
}
.bgdivcls{
  text-align: center;
  background-color: rgb(255, 255, 255);
  padding-top: 80px;
}
.bgcls{
  width: 150px;
  height: 130px;
}
.bgp{
  color: rgba(185, 194, 194, 0.623);
}
.ipsum{
  float: left;
  margin-top: 6px;
  margin-left: 3%;
  margin-bottom: 10px;
  border-left: 5px solid rgb(57,156,201);
  padding-left: 10px;
  width: 90%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  color:  rgb(57,156,201);
}

.ipcls{
  width: 90%;
  height: 30px;
  line-height: 30px;
  border: 0px solid rgba(202, 201, 202, 0.801);
}
.counter {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: rgb(0, 0, 255);
  font-weight: 700;
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgba(155, 153, 153, 0.315);
  text-align: center;
  position: fixed;
  bottom: 0px;
}
/* .log-list {
  margin-bottom: 30px;
} */
.log-item {
  text-align: center;
  margin-bottom: 3px;
  margin-left: 3%;
  padding: 2px;
  float: left;
  background-color: rgb(255, 255, 255);
  border-bottom: 2px solid rgba(202, 201, 202, 0.801);
  width: 45%;
}

</style>
